@extends('admin.layout.main')
@section('content')
    <style>
        .example-modal .modal {
          position: relative;
          top: auto;
          bottom: auto;
          right: auto;
          left: auto;
          display: block;
          z-index: 1;
        }
        .example-modal .modal {
          background: transparent !important;
        }
    </style>
    <link rel="stylesheet" href="/adminlte/plugins/datetimepicker/bootstrap-datetimepicker.min.css">
    <!-- Main content -->
    <section class="content-header">
      <h1>
        用户管理
      </h1>
      <ol class="breadcrumb">
        <li><a href="javascript:void(0)"><i class="fa fa-dashboard"></i> 权限管理</a></li>
        <li class="active">用户管理</li>
      </ol>
    </section>
    <section class="content">
        <!-- Small boxes (Stat box) -->
        <div class="row">
            <div class="col-lg-12 col-xs-6">
                <div class="box">
                    <div class="box-header with-border">
                        <div class="row">
                            <div class="col-sm-10">
                                <a type="button" href="/admin/users/create"><i class="fa fa-fw fa-plus"></i>新增用户</a>
                                @if(!$users->isEmpty())
                                    <a class="batch_del" type="button" href="javascript:void(0)"><i class="fa fa-fw fa-remove"></i>批量删除</a>
                                @endif
                            </div>
                        </div> 
                    </div>
                    
                    <!-- /.box-header -->
                    <div class="box-body">
                        <table class="table table-bordered table-hover" id="user-list">
                            <div class="dataTables_filter">
                                <form action="/admin/users/search" method="GET">
                                    <button type="submit" class="btn btn-info btn-sm">查询:</button><input type="search" name="keywords" class="form-control input-sm">
                                </form>
                            </div>
                            <thead>
                                <tr>
                                    <th style="width: 50px"><a style="cursor:pointer" class="all_check">全选</a></th>
                                    <th style="width: 10px">#</th>
                                    <th>用户名称</th>
                                    <th>操作</th>
                                </tr>
                            </thead>    
                            <tbody> 
                                @foreach($users as $user)
                                    <tr id="tr_{{$user->id}}">
                                        <td><input type="checkbox" name="checkbox_member" class="checkbox_member" user-id="{{$user->id}}"></td>
                                        <td>{{$user->id}}</td>
                                        <td>{{$user->name}}</td>
                                        <td>
                                            <a type="button" class="btn" href="/admin/users/role/{{$user->id}}" ><i class="fa fa-fw fa-edit"></i>角色分配</a>
                                            <a type="button" user-id="{{$user->id}}" class="btn del-per" href="javascript:void(0)" ><i class="fa fa-fw fa-remove"></i>删除用户</a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                        {{$users->links()}}
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="modal fade" id="modal-default">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title"></h4>
          </div>
          <div class="modal-body">
            <p></p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
            <button type="button" data-url="" class="btn btn-primary modal-confirm">确认</button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>
    <script type="text/javascript">
        $(function () {
            $('#user-list').DataTable({
              "paging": false,
              "lengthChange": false,
              "searching": false,
              "info": false,
              "autoWidth": true,
              "columns": [
                {"orderable": false},
                {"orderable": false},
                {"orderable": true},
                {"orderable": false}
              ]
            });
        });

        $('.all_check').click(function(){
            $('.checkbox_member').click();
        });

        $('.del-per').click(function(){
            var user_id = $(this).attr('user-id'),
                url = '/admin/users/delete/'+user_id;
            pop_modal('确认删除', '确定删除用户吗?', url);
        });

        function pop_modal(title, content, url) {
            $('.modal-title').text(title);
            $('.modal-body').html('<p>'+content+'</p>');
            $('.modal-confirm').attr('data-url', url);
            $('#modal-default').modal('show');
        }

        $('.modal-confirm').click(function(){
            var confirm_this = $(this);
            var id_array = new Array();
            $('input[name="checkbox_member"]:checked').each(function(){
                id_array.push($(this).attr('user-id'));
            });
            var data = {'data':id_array};
            $('#modal-default').modal('hide');
            $('#modal-default').on('hidden.bs.modal', function () {
                var url = $('.modal-confirm').attr('data-url');
                if (url == '') {
                    $('#modal-default').modal('hide');
                } else {
                    $.ajax({
                      type: "get",
                      dataType: "json",
                      url: url,
                      data: data,
                      success: function (data) {
                        if (data.flag) {
                            if (data.user_id instanceof Array) {
                                for (var i=0;i<data.user_id.length;i++) {
                                    $('#tr_'+data.user_id[i]).remove();
                                }
                            } else {
                                $('#tr_'+data.user_id).remove();
                            }
                        } else {
                            pop_modal('删除失败', data.msg, '');
                        }
                      }
                    });
                }
            });
        });

        $('.batch_del').click(function(){
            var url = '/admin/users/batch_delete';
            pop_modal('确认删除', '确定删除用户吗?', url);
        });
    </script>
@endsection      